import React from "react";
import {
  Header, Footer, Carousel, SideMenu, ProductCollection, BussinessPartner,
} from "../../components";
import { Row, Col, Typography } from "antd";
import { productList1, productList2, productList3 } from "./mockups";
import sideImage from "../../assets/images/sider_2019_12-09.png";
import sideImage2 from "../../assets/images/sider_2019_02-04.png";
import sideImage3 from "../../assets/images/sider_2019_02-04-2.png";
import styles from "./HomePage.module.css";
import { withTranslation, WithTranslation } from 'react-i18next'

const content = [
  {list: productList1, name: 'hot_recommended', type: 'warning', image: sideImage },
  {list: productList2, name: 'new_arrival', type: 'danger', image: sideImage2 },
  {list: productList3, name: 'domestic_travel', type: 'success', image: sideImage3 }
]

class HomePageComponent extends React.Component<WithTranslation> {
  render() {
    const { t } = this.props

    return (
      <>
        <Header />
        {/* 页面内容 content */}
        <div className={styles["page-content"]}>
          <Row style={{ marginTop: 20 }}>
            <Col span={6}>
              <SideMenu />
            </Col>
            <Col span={18}>
              <Carousel />
            </Col>
          </Row>
          {
            content.map(item => (
              <ProductCollection 
              title={<Typography.Title type={item.type as any}>{t(`home_page.${item.name}`)}</Typography.Title>} 
              sideImage={item.image} 
              products={item.list}
              key={item.type}
              />
            ))
          }
          <BussinessPartner />
        </div>
        <Footer />
      </>
    );
  }
}

export const HomePage = withTranslation()(HomePageComponent)